<!-- 分类列表组件 -->
<template>
  <div class="category-list">
    <ul>
      <li
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
        :style="currentIndex == index ? 'background: #fff;' : ''"
        @click="itemClick({ index, cid: item.cid })"
      >
        <p
          :style="
            currentIndex == index
              ? 'border-left-color: var(--color-tint)'
              : 'border-left-color: rgba(0,0,0,0)'
          "
        >
          {{ item.name }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      currentIndex: 0
    };
  },
  methods: {
    itemClick(e) {
      if (this.currentIndex != e.index) {
        this.currentIndex = e.index;
        this.$emit("categoryListClick", e);
      }
    }
  },
  components: {}
};
</script>

<style scoped>
.category-list {
  text-align: center;
}
.list-item {
  padding: 10px 10px 10px 0;
}
.list-item p {
  padding: 4px;
  border-left: 4px solid rgba(0, 0, 0, 0);
}
</style>
